@include('Home.head')
<link rel="stylesheet" href="{{ URL::asset('css/home/layui.css') }}">

<body>
<div class="container" id="app">
    @include('Home.member.header')
    <div class="my-nav-bar">
    	<ol class="am-breadcrumb">
          <li style="font-weight: 600;"><a href="/home/member/index">首页</a></li>
          <li style="font-weight: 600;"><a href="">订单</a></li>
        </ol>
    </div>
	<div>
    <div class="am-cf cart-panel" id="">
		<div data-am-widget="tabs" class="am-tabs am-tabs-d2">
				      <!-- <ul class="am-tabs-nav am-cf">
				          <li class="am-active"><a href="" v-on:click="class0(null)">全部</a></li>
				          <li><a href="" v-on:click="class0(1)">待发货</a></li>
				          <li><a href="" v-on:click="class0(2)">已发货</a></li>
						  <li><a href="" v-on:click="class0(3)">已完成</a></li>
				      </ul> -->
        {{--<ul class="flow-default" id="LAY_demo1"></ul>--}}
        <div id="" class="withdrawals-panel" v-for="val in order" style="border: none;">
            <p v-if="val.couriertime != ''" style="word-wrap: normal;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">快递单号：@{{ val.courier_number }}</p>
            <div class="groupby-img-panle" style="height: 140px;">
                    <!-- <a href="#" v-show="val.ordertype ==1"><img src="/img/home/user/zshop1.jpg"
                            class="am-img-responsive" /></a>
                    <a href="#" v-show="val.ordertype ==2"><img src="/img/home/user/img31.jpg"
                            class="am-img-responsive" /></a>
                    <a href="#" v-show="val.ordertype ==3"><img src="/img/home/user/cshop.jpg"
                            class="am-img-responsive" /></a> -->
							
					<a href="#"><img :src="val.goods_thumb"
							 class="am-img-responsive" /></a>
            </div>
            <div class="groupby-info-panle">
                {{--<h3><a href="#">@{{ val.ordername }}</a></h3>--}}
                <p>金额：<span class="red2 bold">@{{ val.price }}</span> 元&nbsp; &nbsp;
                   <!-- <span v-show="val.is_self == 0">运费：<span class="red2 bold">@{{ val.freight }}</span>元 </span>
                    <span v-show="val.is_self == 1">运费：<span class="red2 bold">自提</span> </span> -->
                    {{--积分：<span class="am-text-success">20</span>--}}</p>
                    
                <p>
                    状态：
                    <span class="red2" v-show="val.status == -1">订单取消</span>
                    <span class="red2" v-show="val.status == 0">待付款</span>
                    <span class="am-text-success" v-show="val.status == 1">已付款</span>
                    <span class="am-text-success" v-show="val.status == 2">已发货</span>
					<!-- <span class="am-text-success" v-show="val.orderordertype == 2" style="color: ;">已退款</span> -->
                    <span v-show="val.status == 3">订单完成</span>
                </p>
                <p>下单时间：@{{ val.createtime }}</p>
				<p class="groupby-t-p">订单号：@{{ val.ordersn }}</p>
                <p>
                    配送方式：
                    <span v-show="val.freight == 1" style="color:red">包邮</span>
                    <span v-show="val.freight == 0" style="color: red">自提</span>
                </p>
                <p v-if="val.couriertime != ''">发货时间：@{{ val.couriertime }}</p>
				
                <p>
                <a v-on:click="pay(val.id,val.ordertype)" v-show="val.status == 0"
                            class="am-btn am-btn-danger am-btn-xs am-radius" style="border-radius: 50px;">立即支付</a>
                        <a v-show="val.status == 1"
                            class="am-btn am-btn-secondary am-btn-xs am-btn-success am-radius" style="border-radius: 50px;">等待发货</a>
                        <a v-on:click="affirms(val.id)" v-show="val.status == 2"
                            class="am-btn am-btn-warning am-btn-xs am-radius" style="border-radius: 50px;">确定收货</a>
                    <a href="#" v-show="val.status == 3" class="am-btn am-btn-primary am-btn-xs am-radius" style="border-radius: 50px;">订单完成</a>
                    <a v-show="val.status == -1" class="am-btn am-btn-danger am-btn-xs am-radius" style="border-radius: 50px">已取消</a>
					<a v-show="val.status == -2" class="am-btn am-btn-danger am-btn-xs am-radius" style="border-radius: 50px">已退款</a>
                    <a v-on:click="orderComm(val.id,val.ordertype)" class="am-btn am-btn-default am-btn-xs am-radius" style="border-radius: 50px;">订单详情</a>
                </p>
            </div>
        </div>
        <li class="layui-flow-more" v-if="loading">加载中</li>
        <li class="layui-flow-more" v-if="loading==false">没有更多了</li>
	</div>
</div>
@include('Home.foot')
</div>
</body>
<script src="{{ URL::asset('js/admin/layui/layui.js') }}"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: '我的订单',
            order: {

            },
            page: '', //总页数
            nowPage: 2, //本页
            loading: false, //异步加载时的限制
            bottomHight: 50, //滚动条到某个位置才触发时间
			type:''

        },
        methods: {
            handleScroll: function () {
                var rico = this
				// console.log(app.type);
                if (getScrollBottomHeight() <= app.bottomHight && app.nowPage < app.page && app.loading ==
                    false) {
                    app.loading = true;
                    $.get("/home/member/myorder", {
                        '_token': '{{csrf_token()}}',
                        class: 'select',
                        page: app.nowPage + 1,
						type:app.type
                    }, function (res) {
                        for (var i = 0; i < res.data.data.length; i++) {
                            // console.log(res.data.data[i])
                            res.data.data[i].createtime = rico.formatDateTime(res.data.data[i]
                                .createtime)
                            if (res.data.data[i].couriertime) {
                                res.data.data[i].couriertime = rico.formatDateTime(res.data.data[i]
                                    .couriertime)
                            } else {
                                res.data.data[i].couriertime = ''
                            }
                            app.order.push(res.data.data[i]);
                        }
                        app.nowPage++;
                        app.loading = false;
                    });
                }
            },

            //初始化 系统管理员列表
            initialize: function () {
                var rico = this
				var st = this.obtain('st');
                $.post("/home/member/myorder", {
                    '_token': '{{csrf_token()}}',
                    class: 'select',status:st
                }, function (res) {
                    if (res.code) {
                        // app.pages = res.data
                        app.order = res.data.data;
                        app.page = res.data.last_page;
                        app.nowPage = res.data.current_page;
                        for (var i = 0; app.order.length > i; i++) {
                            app.order[i].createtime = rico.formatDateTime(app.order[i].createtime)
                            if (res.data.data[i].couriertime) {
                                res.data.data[i].couriertime = rico.formatDateTime(res.data.data[i]
                                    .couriertime)
                            } else {
                                res.data.data[i].couriertime = ''
                            }
                        }
						if(st == null){
							app.title = '全部订单';
						}else if(st == 1){
							app.title = '已发货订单';
						}else if(st == 2){
							app.title = '待发货订单';
						}else if(st == 3){
							app.title = '已完成订单';
						}
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
			obtain:function (val) {
			
			    var query = window.location.search.substring(1);
			
			    var vars = query.split("&");
			
			    for (var i=0;i<vars.length;i++) {
			
			        var pair = vars[i].split("=");
			
			        if(pair[0] == val){
			
			            return pair[1];
			
			        }
			
			    }
			
			},
			class0: function (type) {
			    var rico = this
			    $.post("/home/member/myorder", {
			        '_token': '{{csrf_token()}}',
			        class: 'select',status:type
			    }, function (res) {
			        if (res.code) {
			            // app.pages = res.data
						app.type = type;
			            app.order = res.data.data;
			            app.page = res.data.last_page;
			            app.nowPage = res.data.current_page;
			            for (var i = 0; app.order.length > i; i++) {
			                app.order[i].createtime = rico.formatDateTime(app.order[i].createtime)
			                if (res.data.data[i].couriertime) {
			                    res.data.data[i].couriertime = rico.formatDateTime(res.data.data[i]
			                        .couriertime)
			                } else {
			                    res.data.data[i].couriertime = ''
			                }
			            }
			        } else {
			            layer.msg(res.data);
			        }
			    });
			},
			
            formatDateTime: function (timeStamp) {
                var date = new Date();
                date.setTime(timeStamp * 1000);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                minute = minute < 10 ? ('0' + minute) : minute;
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
            },
            pag: function () {
                $.post("/home/member/myorder", {
                    '_token': '{{csrf_token()}}',
                    class: 'select'
                }, function (res) {
                    if (res.code) {

                        app.order = res.data.data
                    } else {
                        layer.msg(res.data);
                    }
                });
            },

            pay: function (id, ordertype) {
                console.log(ordertype)
                if (ordertype == '4') {
                    window.location.href = "/home/timeShop/getOrder?id=" + id;
                } else {
                    window.location.href = "/home/orderpage?id=" + id;
                }

            },
            //订单详情
            orderComm: function (id,ordertype) {
                if (ordertype == '4') {
                    window.location.href = "/home/timeShop/centerOrder?id=" + id;
                } else {
                    window.location.href = "/home/ordercomment?id=" + id;
                }
            },
            //确认收货
            affirms: function (id) {
                var that = this;
                $.post("/home/member/myorder", {
                    '_token': '{{csrf_token()}}',
                    class: 'affirms',
                    id: id
                }, function (res) {
                    if (res.code) {
                        layer.msg(res.data);
                        that.initialize();
                    } else {
                        layer.msg(res.data);
                    }
                });
            }

        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    })

    //添加滚动事件
    window.onload = function () {
        window.addEventListener('scroll', app.handleScroll)
    }
    //滚动条到底部的距离
    function getScrollBottomHeight() {
        return getPageHeight() - getScrollTop() - getWindowHeight();

    }
    //页面高度
    function getPageHeight() {
        return document.querySelector("html").scrollHeight
    }
    //滚动条顶 高度
    function getScrollTop() {
        var scrollTop = 0,
            bodyScrollTop = 0,
            documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }

    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }
</script>

</html>